<style lang="less" scoped>
  @import './my.less';
</style>

<template>
  <div
    class="page container my"
    :class="{ 'my-has-moments': hasMoments }"
  >
    <v-main-layout :reverse="!useMySiderOnRight">
      <v-main-layout-content
        v-if="hasMoments"
        class="my-moments"
      >
        <a-card
          title="动态"
          :bordered="false"
          class="card-content"
        >
          <a-button
            slot="extra"
            ghost
            size="small"
            type="primary"
            class="change-layout-btn"
            @click="onChangeMySiderLayout"
          >
            布局切换
          </a-button>

          <!-- moments list -->
          <div class="my-moments-list">
            <v-flex start class="my-moments-item">
              <v-flex-item initial class="my-moments-sider">
                <v-like size="small" />
              </v-flex-item>

              <v-flex-item class="my-moments-main">
                <div class="my-moments-head">
                  <v-flex initial>
                    <v-flex-item>
                      <a-avatar
                        size="small"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590050758085&di=51b169e1352585acf854c9145a2a96fb&imgtype=0&src=http%3A%2F%2Fimg1.ownskin.com%2Fpowerwall%2FQT%2F28%2Fz3%2FN1%2Fdcf38afe.gif"
                      />
                      高山上的勇士
                    </v-flex-item>

                    <v-flex-item>
                      <v-cap name="社区管理员" />
                    </v-flex-item>

                    <v-flex-item class="my-moments-time">
                      2020/04/15 19:37:01
                    </v-flex-item>
                  </v-flex>
                </div>

                <div class="my-moments-body">
                  <div class="my-moments-title">
                    <nuxt-link to="" class="link-primary">
                      评论了文章
                    </nuxt-link>
                  </div>

                  <v-flex start>
                    <v-flex-item>
                      <p>聊天机器人到底有没有商业价值？做起来到底麻不麻烦？到底有没有商业价值？做起来到底麻不麻烦？</p>
                    </v-flex-item>
                  </v-flex>
                </div>

                <div class="my-moments-foot">
                  <p>最近经常看到这个消息的推送，体验非常好</p>
                </div>
              </v-flex-item>
            </v-flex>

            <v-flex start class="my-moments-item">
              <v-flex-item initial class="my-moments-sider">
                <v-like size="small" />
              </v-flex-item>

              <v-flex-item class="my-moments-main">
                <div class="my-moments-head">
                  <v-flex initial>
                    <v-flex-item>
                      <a-avatar
                        size="small"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590050758085&di=51b169e1352585acf854c9145a2a96fb&imgtype=0&src=http%3A%2F%2Fimg1.ownskin.com%2Fpowerwall%2FQT%2F28%2Fz3%2FN1%2Fdcf38afe.gif"
                      />
                      高山上的勇士
                    </v-flex-item>

                    <v-flex-item>
                      <v-cap name="社区管理员" />
                    </v-flex-item>

                    <v-flex-item class="my-moments-time">
                      2020/04/15 19:37:01
                    </v-flex-item>
                  </v-flex>
                </div>

                <div class="my-moments-body">
                  <div class="my-moments-title">
                    <nuxt-link to="" class="link-primary">
                      评论了文章
                    </nuxt-link>
                  </div>

                  <v-flex start>
                    <v-flex-item initial class="my-moments-thumb">
                      <img src="~/assets/images/default.png" alt="">
                    </v-flex-item>

                    <v-flex-item>
                      <p>聊天机器人到底有没有商业价值？做起来到底麻不麻烦？到底有没有商业价值？做起来到底麻不麻烦？</p>
                    </v-flex-item>
                  </v-flex>
                </div>

                <div class="my-moments-foot">
                  <p>最近经常看到这个消息的推送，体验非常好</p>
                </div>
              </v-flex-item>
            </v-flex>

            <v-flex start class="my-moments-item">
              <v-flex-item initial class="my-moments-sider">
                <v-like size="small" />
              </v-flex-item>

              <v-flex-item class="my-moments-main">
                <div class="my-moments-head">
                  <v-flex initial>
                    <v-flex-item>
                      <a-avatar
                        size="small"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590050758085&di=51b169e1352585acf854c9145a2a96fb&imgtype=0&src=http%3A%2F%2Fimg1.ownskin.com%2Fpowerwall%2FQT%2F28%2Fz3%2FN1%2Fdcf38afe.gif"
                      />
                      高山上的勇士
                    </v-flex-item>

                    <v-flex-item>
                      <v-cap name="社区管理员" />
                    </v-flex-item>

                    <v-flex-item class="my-moments-time">
                      2020/04/15 19:37:01
                    </v-flex-item>
                  </v-flex>
                </div>

                <div class="my-moments-body">
                  <div class="my-moments-title">
                    <nuxt-link to="" class="link-primary">
                      评论了文章
                    </nuxt-link>
                  </div>

                  <v-flex start>
                    <v-flex-item initial class="my-moments-thumb">
                      <img src="~/assets/images/default.png" alt="">
                    </v-flex-item>

                    <v-flex-item>
                      <p>聊天机器人到底有没有商业价值？做起来到底麻不麻烦？到底有没有商业价值？做起来到底麻不麻烦？</p>
                    </v-flex-item>
                  </v-flex>
                </div>
              </v-flex-item>
            </v-flex>

            <v-flex start class="my-moments-item">
              <v-flex-item initial class="my-moments-sider">
                <v-like size="small" />
              </v-flex-item>

              <v-flex-item class="my-moments-main">
                <div class="my-moments-head">
                  <v-flex initial>
                    <v-flex-item>
                      <a-avatar
                        size="small"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590050758085&di=51b169e1352585acf854c9145a2a96fb&imgtype=0&src=http%3A%2F%2Fimg1.ownskin.com%2Fpowerwall%2FQT%2F28%2Fz3%2FN1%2Fdcf38afe.gif"
                      />
                      高山上的勇士
                    </v-flex-item>

                    <v-flex-item>
                      <v-cap name="社区管理员" />
                    </v-flex-item>

                    <v-flex-item class="my-moments-time">
                      2020/04/15 19:37:01
                    </v-flex-item>
                  </v-flex>
                </div>

                <div class="my-moments-body">
                  <div class="my-moments-title">
                    <nuxt-link to="" class="link-primary">
                      评论了文章
                    </nuxt-link>
                  </div>

                  <v-flex start>
                    <v-flex-item>
                      <p>聊天机器人到底有没有商业价值？做起来到底麻不麻烦？到底有没有商业价值？做起来到底麻不麻烦？</p>
                    </v-flex-item>
                  </v-flex>
                </div>
              </v-flex-item>
            </v-flex>
          </div>

          <!-- pagination -->
          <a-pagination
            v-model="current"
            show-less-items
            size="small"
            :total="500"
          />
        </a-card>
      </v-main-layout-content>

      <!-- 个人信息 -->
      <v-main-layout-sider :fullscreen="!hasMoments">
        <header class="my-head">
          <div v-if="!hasMoments" class="my-slogan">
            <img src="~/assets/images/slogan.png" alt="">
          </div>

          <div class="my-baseInfo">
            <a-avatar
              :size="96"
              shape="square"
              class="my-avatar"
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590050758085&di=51b169e1352585acf854c9145a2a96fb&imgtype=0&src=http%3A%2F%2Fimg1.ownskin.com%2Fpowerwall%2FQT%2F28%2Fz3%2FN1%2Fdcf38afe.gif"
            />

            <dl class="my-info">
              <dt class="my-name">
                高山上的勇士
                <a-tag>去认证</a-tag>
              </dt>

              <dd class="my-caps">
                <v-cap name="社区管理员" />
                <v-cap
                  type="honor"
                  theme="golden"
                  name="贡献值280"
                />
              </dd>
            </dl>

            <div class="my-action">
              <a-button
                ghost
                type="dark"
                size="large"
                class="my-action-btn"
                @click="go2EditMyProfile"
              >
                编辑资料
              </a-button>
            </div>
          </div>
        </header>

        <a-divider class="my-divider" />

        <section class="my-body">
          <a-card
            title="基本信息"
            :bordered="false"
            class="card-content"
          >
            <dl class="my-list-item">
              <dt class="my-list-label">
                智源ID：
              </dt>
              <dd class="my-list-value">
                智源ID
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                姓名：
              </dt>
              <dd class="my-list-value">
                姓名
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                公司/学校：
              </dt>
              <dd class="my-list-value">
                公司
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                部门/学院：
              </dt>
              <dd class="my-list-value">
                学院
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                职位/专业：
              </dt>
              <dd class="my-list-value">
                专业
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                帖子数：
              </dt>
              <dd class="my-list-value">
                <v-flex initial>
                  <v-flex-item>
                    12，最常用的标签
                  </v-flex-item>

                  <v-flex-item>
                    <v-tags
                      size="small"
                      :data-source="tags"
                    />
                  </v-flex-item>
                </v-flex>
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                评论数：
              </dt>
              <dd class="my-list-value">
                评论数
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                个人网站：
              </dt>
              <dd class="my-list-value">
                <a href="https://www.youtube.com" target="_blank" class="link-primary">https://www.youtube.com</a>
              </dd>
            </dl>

            <dl class="my-list-item">
              <dt class="my-list-label">
                简介：
              </dt>
              <dd class="my-list-value">
                <div class="my-description">
                  <p>科学的历史，从某种意义上说，就是错觉和失败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。科学的历史，从某种意义上说，就是错觉和失败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。书山有路勤为径，学海无涯苦作舟。恰似一江春水向东流恰似一江春水向科学的历史，从某种意义上说，就是错觉和失败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。书山有路勤为径，学海无涯苦作舟。恰似一江春水向东流恰似一江春水向恰似一江春水向东流恰似一江春败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。书山有路勤为径，学海无涯苦作舟。恰似一江春水向东流恰似一江春水向恰似一江春水向东流恰似一江春</p>
                  <p>科学的历史，从某种意义上说，就是错觉和失败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。科学的历史，从某种意义上说，就是错觉和失败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。书山有路勤为径，学海无涯苦作舟。恰似一江春水向东流恰似一江春水向科学的历史，从某种意义上说，就是错觉和失败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。书山有路勤为径，学海无涯苦作舟。恰似一江春水向东流恰似一江春水向恰似一江春水向东流恰似一江春败的历史，是伟大的顽愚者以笨拙和低。三更灯火五更鸡，正是男儿读书时，黑发不知勤学早，白首方悔读书迟。书山有路勤为径，学海无涯苦作舟。恰似一江春水向东流恰似一江春水向恰似一江春水向东流恰似一江春</p>
                </div>
              </dd>
            </dl>
          </a-card>
        </section>
      </v-main-layout-sider>
    </v-main-layout>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import Cap from '~/components/cap'
import Tags from '~/components/tags'
import Like from '~/components/like'
import Flex from '~/components/flex'
import FlexItem from '~/components/flex/flex-item'
import MainLayout from '~/components/main-layout'
import MainLayoutSider from '~/components/main-layout/sider'
import MainLayoutContent from '~/components/main-layout/content'

const tags = ['智源动态']

export default {
  components: {
    'v-cap': Cap,
    'v-tags': Tags,
    'v-like': Like,
    'v-flex': Flex,
    'v-flex-item': FlexItem,
    'v-main-layout': MainLayout,
    'v-main-layout-sider': MainLayoutSider,
    'v-main-layout-content': MainLayoutContent,
  },

  data () {
    return {
      tags,
      current: 1,
    }
  },

  computed: {
    ...mapState({
      useMySiderOnRight: ({ config = {} }) => config.useMySiderOnRight,
    }),

    // 是否有动态
    hasMoments () {
      // Mock
      return true
    },
  },

  methods: {
    ...mapMutations({
      changeMySiderLayout: 'config/changeMySiderLayout',
    }),

    // 跳转到修改资料页
    go2EditMyProfile () {
      this.$router.push('/my/profile')
    },

    // 切换侧边栏的位置
    onChangeMySiderLayout () {
      this.changeMySiderLayout(!this.useMySiderOnRight)
    },
  },
}
</script>
